<template>
  <div>
    <div id="Content">
      <div id="Welcome">
        <div id="WelcomeContent">
          <!--显示登录用户的fistname-->
        </div>
      </div>

      <div id="Main">
        <div id="Sidebar">
          <div id="SidebarContent">
            <a @click="getProductList('fish')"><img src="../../assets/images/fish_icon.gif" id="fishImg"
                                                    class="productShow_1" data-name="FISH"/></a>
            <br/>
            Saltwater, Freshwater
            <br/>
            <a @click="getProductList('dog')"><img src="../../assets/images/dogs_icon.gif" id="dogsImg"
                                                   class="productShow_1" data-name="DOGS"/></a>
            <br/>
            Various Breeds
            <br/>
            <a @click="getProductList('cat')"><img src="../../assets/images/cats_icon.gif" id="catImg"
                                                   class="productShow_1" data-name="CATS"/></a>
            <br/>
            Various Breeds, Exotic Varieties
            <br/>
            <a @click="getProductList('reptile')"><img src="../../assets/images/reptiles_icon.gif" id="repImg"
                                                       class="productShow_1" data-name="REPTILES"/></a>
            <br/>
            Lizards, Turtles, Snakes
            <br/>
            <a @click="getProductList('bird')"><img src="../../assets/images/birds_icon.gif" id="birdsImg"
                                                    class="productShow_1" data-name="BIRDS"/></a>
            <br/>
            Exotic Varieties

          </div>
        </div>

        <div id="MainImage">
          <div id="MainImageContent">
            <map name="estoremap">
              <area alt="Birds" coords="72,2,280,250"
                    @click="getProductList('bird')" shape="RECT" id="top_2" class="productShow_2" data-name="BIRDS"/>
              <area alt="Fish" coords="2,180,72,250"
                    @click="getProductList('fish')" shape="RECT" class="productShow_2" data-name="FISH"/>
              <area alt="Dogs" coords="60,250,130,320"
                    @click="getProductList('dog')" shape="RECT" class="productShow_2" data-name="DOGS"/>
              <area alt="Reptiles" coords="140,270,210,340"
                    @click="getProductList('reptile')" shape="RECT" class="productShow_2" data-name="REPTILES"/>
              <area alt="Cats" coords="225,240,295,310"
                    @click="getProductList('cat')" shape="RECT" class="productShow_2" data-name="CATS"/>
              <area alt="Birds" coords="280,180,350,250"
                    @click="getProductList('bird')" shape="RECT" class="productShow_2" data-name="BIRDS"/>
            </map>
            <img height="355" src="../../assets/images/splash.gif" align="middle"
                 usemap="#estoremap" width="350"/></div>
        </div>


        <div id="Separator">&nbsp;</div>
      </div>
    </div>
  </div>
</template>

<script>
import top from "../../components/common/top.vue";
import bottom from "../../components/common/bottom.vue";
import axios from 'axios';

export default {
  components: {
    top,
    bottom,
  },
  name: 'main',
  data() {
    return {
      category: '',
      categoryList: '',
    }
  },
  methods: {
    getCategory() {
      axios.get(`http://localhost:8080/jpetstore/pets`)
          .then(response => {
            console.log(response.data.data);
            this.categoryList = response.data.data; // 获取5种类别宠物
          })
          .catch(error => {
            console.error('Error fetching category list:', error);
          });
    },

    getProductList(category) {
      if (category === 'cat' && this.categoryList && this.categoryList.cat) {
        let ProductList = [];
        ProductList = JSON.parse(this.categoryList.cat);
        console.log('传递的数据'+this.categoryList.cat)
        return this.$router.push({path: '/category', query: {productList: this.categoryList.cat}});
      }

      if (category === 'fish' && this.categoryList && this.categoryList.fish) {
        let ProductList = [];
        ProductList = JSON.parse(this.categoryList.fish);
        return this.$router.push({path: '/category', query: {productList: this.categoryList.fish}});
      }

      if (category === 'bird' && this.categoryList && this.categoryList.bird) {
        let ProductList = [];
        ProductList = JSON.parse(this.categoryList.bird);
        return this.$router.push({path: '/category', query: {productList: this.categoryList.bird}});
      }

      if (category === 'dog' && this.categoryList && this.categoryList.dog) {
        let ProductList = [];
        ProductList = JSON.parse(this.categoryList.dog);
        return this.$router.push({path: '/category', query: {productList: this.categoryList.dog}});
      }

      if (category === 'reptile' && this.categoryList && this.categoryList.reptile) {
        let ProductList = [];
        ProductList = JSON.parse(this.categoryList.reptile);
        return this.$router.push({path: '/category', query: {productList: this.categoryList.reptile}});
      }

      return [];
    },


  },
  mounted() {
    this.getCategory();
  }
}
</script>
